Thanks @m0ose for the effort!

Please keep in mind, that apart from writing the array-data several metadata tags have to be set in accordance to the metadata. For example the SampleFormat tag, that tells readers how to interpret the array data.

It now writes metadata. There may be a problem 'though. If the metadata(bitsPerSample and sampleFormat) and the typed array do not match, should it go by whats in the metadata or the typed array?
Right now if they don't match I don't know what will happen. This is related to what @DanielJDufour said up here, #106 (comment).

I think this should be solved using a layered architecture.

The high level one should be as easy and uncomplicated as the readRasters and readRGB. The users should not be hassled with the sometimes ugly internals of the TIFF format and the best defaults should used unless understandable options are set. This API will need to be designed, but will not make the cut for v1.0.

The low level API should allow the setting of the various TIFF tags and raster data. Here it could be possible to set conflicting options, but users should usually not access that API directly. I consider the current write API as the lower level one, so you could pick where you get the metadata from and what to do when they are conflicting.

Hi, @m0ose . Let me know when you want me to take another look at your PR! Thanks for your awesome work :-)

Hey, this might be a unique problem to me? But When I tried your code it didn't work until I enforced big-endian encoding.

So I changed the code like this (SUPER SUPER UGLY, just proof of working):

const data = new Uint8Array(numBytesInIfd + (values.length * 4 * samplesPerPixel));
  times(prfx.length, (i) => { data[i] = prfx[i]; });
  // forEach(img, (value, i) => {
  //   data[numBytesInIfd + i] = value;
  // });

  // store data
  for (let i = 0, vl = values.length; i < vl; i++) {
    const value = values[i]
    const buffer = new ArrayBuffer(4)
    const view = new DataView(buffer)
    view.setFloat32(0, value, false)
    const uint8 = new Uint8Array(view.buffer)
    const idx = numBytesInIfd + i * 4
    data[idx] = uint8[0]
    data[idx + 1] = uint8[1]
    data[idx + 2] = uint8[2]
    data[idx + 3] = uint8[3]
  }

After trying the above code, I am getting "RangeError: Offset is outside the bounds of the DataView" while parsing the arraybuffer returned.

Resolved by adding correct "StripByteCounts" value along with "SampleFormat" and "BitsPerSample"

trying to write float32bit the file is corrupted @manivannan23k can you help me.

const len = this.width * this.height;
    const newdata = new Float32Array(len);
    for (var i = 0; i < len; i++) {
      newdata[i] = this.data[i] + this.WhatIfLayers[0]?.data[i];
    }

    const image = await this.originalTiff.getImage();
    const origin = image.getOrigin();
    const resolution = image.getResolution();

    const metadata = {
      height: this.height,
      width: this.width,
      ModelPixelScale: resolution,
      GeographicTypeGeoKey: 3857,
      GeogCitationGeoKey: 'WGS 84',
      GTModelTypeGeoKey: 2,
      ModelTiepoint: [0, 0, 0, ...origin]
    };
    const arrayBuffer = await writeArrayBuffer(newdata, metadata);
    var blob = new Blob([arrayBuffer], { type: 'image/tiff' });
    //uplaodEditedDSM(this.reportid, blob, `dsm_${this.reportid}`)
    var link = document.createElement("a");
    link.href = window.URL.createObjectURL(blob);
    var fileName = 'dsm_edited';
    link.download = fileName;
    link.click();

This would be a fantastic addition. These tricky problems are above my ability but how can I best encourage progress? Is sponsoring the feature an option? It seems like a few people have been interested in this over time.